<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>待办事项</title>
  <link rel="stylesheet" href="styles.css"> 
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    label { display: block; margin-top: 10px; }
    input { margin-top: 5px; }
    button { margin-top: 10px; margin-left: 5px; }
    #taskList { margin-top: 20px; }
  </style>
</head>
<body>
  <h1>待办事项</h1>
  
  <!-- 添加任务表单 -->
  <div>
    <label for="newTask"></label>
    <input type="text" id="newTask">
    <button onclick="addTask()">添加任务</button>
  </div>

  <!-- 任务列表 -->
  <ul id="taskList"></ul>
  
  <script>
    let token = localStorage.getItem('token');

    async function addTask() {
      const text = document.getElementById('newTask').value;

      const response = await fetch('http://localhost:3000/api/tasks', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({ text })
      });

      if (response.ok) {
        
        loadTasks();
      } else {
        alert('添加任务失败');
      }
    }

    async function loadTasks() {
      const response = await fetch('http://localhost:3000/api/tasks', {
        method: 'GET',
        headers: { 'Authorization': `Bearer ${token}` }
      });

      const tasks = await response.json();
      const taskList = document.getElementById('taskList');
      taskList.innerHTML = '';

      tasks.forEach(task => {
        const li = document.createElement('li');
        
        // 创建任务文本和编辑按钮
        const taskText = document.createElement('span');
        taskText.innerText = task.text; // 显示任务文本

        // 添加编辑按钮
        const editButton = document.createElement('button');
        editButton.innerText = '编辑';
        editButton.onclick = () => editTask(task, taskText, editButton);

        // 添加删除按钮
        const deleteButton = document.createElement('button');
        deleteButton.innerText = '删除';
        deleteButton.onclick = () => deleteTask(task.id);

        li.appendChild(taskText);
        li.appendChild(editButton);
        li.appendChild(deleteButton);
        taskList.appendChild(li);
      });
    }

    function editTask(task, taskText, editButton) {
      // 创建输入框
      const input = document.createElement('input');
      input.type = 'text';
      input.value = task.text; // 设置输入框的值为当前任务文本

      // 创建保存按钮
      const saveButton = document.createElement('button');
      saveButton.innerText = '保存';
      saveButton.onclick = () => updateTask(task.id, input.value, taskText, editButton, input);

      // 替换任务文本和按钮
      taskText.parentNode.replaceChild(input, taskText);
      editButton.parentNode.replaceChild(saveButton, editButton);

      // 隐藏删除按钮
      const deleteButton = editButton.nextSibling; // 获取删除按钮
      deleteButton.style.display = 'none'; // 隐藏删除按钮
    }

    async function updateTask(taskId, newText, taskText, editButton, input) {
      const response = await fetch(`http://localhost:3000/api/tasks/${taskId}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({ text: newText })
      });

      if (response.ok) {
        // 更新任务文本并恢复编辑按钮
        taskText.innerText = newText; // 设置为新文本
        const newEditButton = document.createElement('button');
        newEditButton.innerText = '编辑';
        newEditButton.onclick = () => editTask(task, taskText, newEditButton);
        
        // 替换输入框和保存按钮
        input.parentNode.replaceChild(taskText, input);
        editButton.parentNode.replaceChild(newEditButton, editButton);

        // 显示删除按钮
        const deleteButton = document.createElement('button');
        deleteButton.innerText = '删除';
        deleteButton.onclick = () => deleteTask(taskId);
        newEditButton.parentNode.appendChild(deleteButton); // 重新添加删除按钮
      } else {
        alert('更新任务失败');
      }
    }

    async function deleteTask(taskId) {
      
      
        const response = await fetch(`http://localhost:3000/api/tasks/${taskId}`, {
          method: 'DELETE',
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });

        if (response.ok) {
          
          loadTasks(); // 重新加载任务
        } else {
          alert('删除任务失败');
        }
      }
    

    window.onload = loadTasks; // 页面加载时加载任务
  </script>
</body>
</html>





